<template>
  <div class="screen-data-wrapper">
    <div class="screen-data-left">
      <div class="screen-data-left-content">
        <div class="screen-card">
          <div class="screen-card-header">平台数据统计</div>
          <div class="screen-card-content">
            <div class="screen-card-content-content-item">
              <div class="screen-card-content-content-item-title">教师人数</div>
              <div class="screen-card-content-content-item-content">
                {{ dashboardData.teachers_count }}
              </div>
            </div>
            <div class="screen-card-content-content-item">
              <div class="screen-card-content-content-item-title">学生人数</div>
              <div class="screen-card-content-content-item-content">
                {{ dashboardData.students_count }}
              </div>
            </div>
            <div class="screen-card-content-content-item">
              <div class="screen-card-content-content-item-title">实验仪器</div>
              <div class="screen-card-content-content-item-content">
                {{ dashboardData.equipments_count }}
              </div>
            </div>
            <div class="screen-card-content-content-item">
              <div class="screen-card-content-content-item-title">
                虚拟仿真实验
              </div>
              <div class="screen-card-content-content-item-content">
                {{ dashboardData.experiments_count }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="screen-data-left-content">
        <div class="screen-data-left-content-item">
          <div class="screen-card w50">
            <div class="screen-card-header">
              实验报告排行榜
              <div class="more" @click="handleMoreClick('2')">
                更多
                <div class="more-icon"></div>
              </div>
            </div>
            <div class="chart2">
              <chart4 :data="chartData4" />
            </div>
          </div>
          <div class="screen-card w50">
            <div class="screen-card-header">实验资产</div>
            <div class="chart2">
              <chart2 :data="chartData2" />
            </div>
          </div>
        </div>
      </div>
      <div class="screen-data-left-content">
        <div class="screen-card">
          <div class="screen-card-header">虚拟仿真实验排行榜</div>
          <div class="chart5">
            <chart5 :data="chartData5" />
          </div>
        </div>
      </div>
    </div>
    <div class="screen-data-right">
      <div class="screen-card-col">
        <div class="screen-card-header">
          <div class="title">教师活跃排行榜</div>
          <div class="more" @click="handleMoreClick('1')">
            更多
            <div class="more-icon"></div>
          </div>
        </div>
        <div class="list-table">
          <div class="list-table-header">
            <div class="th">排名</div>
            <div class="th">教师</div>
            <div class="th">活跃度</div>
          </div>
          <div class="list-table-body">
            <div
              class="list-table-body-item"
              v-for="(item, index) in teacherList"
              :key="index"
            >
              <div class="list-table-body-item-content">{{ index + 1 }}</div>
              <div class="list-table-body-item-content">
                {{ item.key }}
              </div>
              <div class="list-table-body-item-content">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="screen-card-col">
        <div class="screen-card-header">
          <div class="title">热门问题</div>
        </div>
        <div class="list-data">
          <div class="list-data-item" v-for="item in questionList">
            <div class="list-data-item-title">{{ item.title }}</div>
            <div class="list-data-item-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import api from "@/api";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import chart2 from "./charts/chart2.vue";
import chart4 from "./charts/chart4.vue";
import chart5 from "./charts/chart5.vue";
const router = useRouter();
const questionList = ref([]);
const dashboardData = ref({});
const chartData4 = ref({
  dataX: [],
  dataY: [],
});
const chartData5 = ref({
  dataX: [],
  dataY1: [],
  dataY2: [],
});
const chartData2 = ref([]);
const teacherList = ref([]);
const queryData = async () => {
  let res = await api.apiDashboardSchoolManagerDashboardDataPost({});
  dashboardData.value = res.data;
  questionList.value = res.data?.question_datalist ?? []; //热门问题
  res.data.reprotdata.forEach((item) => {
    chartData4.value.dataX.push(item.name || '未命名');
    chartData4.value.dataY.push(item.value);
  });
  const groupedData = new Map();
  res.data.experiment_datalist.forEach((item) => {
    if (!groupedData.has(item.x)) {
      groupedData.set(item.x, {
        dataX: item.x,
        dataY1: 0,
        dataY2: 0,
      });
    }
    const currentItem = groupedData.get(item.x);
    if (item.type === "教师") {
      currentItem.dataY1 = item.y;
    }
    if (item.type === "学生") {
      currentItem.dataY2 = item.y;
    }
  });
  Array.from(groupedData.values()).forEach((item) => {
    chartData5.value.dataX.push(item.dataX);
    chartData5.value.dataY1.push(item.dataY1);
    chartData5.value.dataY2.push(item.dataY2);
  });
  chartData2.value = res.data.propertyData;
  teacherList.value = res.data?.teachers ?? [];
};
const handleMoreClick = (type) => {
  if (type === "1") {
    router.push({
      path: "teacher-active-ranking",
    });
  } else if (type === "2") {
    router.push({
      path: "test-report",
    });
  }
};

onMounted(() => {
  queryData();
});
</script>
<style lang="less" scoped>
.screen-data-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;

  .screen-data-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 12px;
    height: 100%;

    .screen-data-left-content {
      &:first-child {
        margin-bottom: 12px;
      }
      &:last-child {
        flex: 1;
      }
      .screen-data-left-content-item {
        display: flex;
        @media screen and (max-width: 1000px) {
          flex-direction: column;
        }
      }
      .screen-card {
        background: #ffffff;
        height: 100%;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        .screen-card-header {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #262626;
          line-height: 22px;
          text-align: left;
          font-style: normal;
          display: flex;
          justify-content: space-between;
        }

        .screen-card-content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .screen-card-content-content-item {
            width: 191px;
            height: 88px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .screen-card-content-content-item-title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #595959;
              line-height: 16px;
              text-align: right;
              font-style: normal;
              margin-bottom: 10px;
            }

            .screen-card-content-content-item-content {
              font-family: Impact;
              font-size: 24px;
              color: #262626;
              line-height: 26px;
              text-align: right;
              font-style: normal;
            }
          }
        }
      }
    }
  }

  .screen-data-right {
    width: 302px;
    display: flex;
    height: 100%;
    flex-direction: column;
  }
}
.w50 {
  width: 50%;
  margin-right: 12px;
  @media screen and (max-width: 1000px) {
    width: 100%;
  }
}
.w50:last-child {
  margin-right: 0;
}

.chart1 {
  height: 204px;
}
.chart2 {
  height: 200px;
}

.chart4 {
  height: 200px;
}
.chart5 {
  padding-top: 16px;
  height: calc(100% - 32px);
}
.more {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #595959;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  display: flex;
  cursor: pointer;
}
.more-icon {
  width: 16px;
  height: 16px;
  background: url("@/assets/right-icon.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 4px;
}
.screen-card-col {
  width: 302px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px 16px;
  overflow: hidden;
  &:first-child {
    height: 534px;
  }
  &:last-child {
    flex: 1;
    margin-bottom: 0;
  }
  .screen-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #262626;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
  }
  .list-table {
    height: calc(100% - 48px);
    overflow-y: auto;
    .list-table-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .th {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #262626;
        padding: 16px 0;
        line-height: 16px;
        text-align: left;
        font-style: normal;

        &:nth-child(1) {
          width: 34px;
        }
        &:nth-child(2) {
          flex: 1;
        }
        &:nth-child(3) {
          width: 48px;
        }
      }
    }
    .list-table-body {
      .list-table-body-item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        justify-content: space-between;
        overflow: hidden;

        &:last-child {
          margin-bottom: 0;
        }
        .list-table-body-item-content {
          height: 26px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #262626;
          line-height: 26px;
          text-align: left;
          font-style: normal;
          &:nth-child(1) {
            width: 34px;
          }
          &:nth-child(2) {
            flex: 1;
          }
          &:nth-child(3) {
            width: 48px;
          }
        }
      }
    }
  }
  .list-data {
    height: calc(100% - 48px);
    overflow-y: auto;
    .list-data-item {
      margin-bottom: 12px;
      .list-data-item-title {
        height: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #262626;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-bottom: 8px;
      }
      .list-data-item-content {
        padding-left: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #595959;
        line-height: 16px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>
